<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>六边形导航</title>
		<style type="text/css">
			body {
				background-color: #55aa7f;
			}
			.wrap {
				width: 1000px;
				height: 500px;
				margin: 150px auto;
			}
			.wrap ul {
				padding: 0;
				width: 950px;
				height: 100%;
				margin: 0 auto;
			}
			.wrap li {
				
				width: 180px;
				height: 105px;
				background-color: rgba(0,0,0,.5);
				list-style: none;
				float: left;
				margin: 30px 5px;
				position: relative;
			}
			.wrap li::before {
				content: "";
				display: block;
				width: 180px;
				height: 105px;
				background-color: rgba(0,0,0,.5);
				position: absolute;
				top: 0;
				left: 0;
				transform: rotate(-60deg);
			}
			.wrap li::after {
				content: "";
				display: block;
				width: 180px;
				height: 105px;
				background-color: rgba(0,0,0,.5);
				position: absolute;
				top: 0;
				left: 0;
				transform: rotate(60deg);
			}
			.wrap li:nth-child(6){
				margin-left: 100px;
			}
			.wrap li>img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 20;
				transition: 2s;
			}
			.wrap li:hover img {
				transform:translate(-50%,-50%) rotate(360deg) scale(1.3);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul >
				<li><img src="../../img/icons/1.png" alt=""></li>
				<li><img src="../../img/icons/2.png" alt=""></li>
				<li><img src="../../img/icons/3.png" alt=""></li>
				<li><img src="../../img/icons/4.png" alt=""></li>
				<li><img src="../../img/icons/5.png" alt=""></li>
				<li><img src="../../img/icons/6.png" alt=""></li>
				<li><img src="../../img/icons/7.png" alt=""></li>
				<li><img src="../../img/icons/8.png" alt=""></li>
				<li><img src="../../img/icons/9.png" alt=""></li>
				<li><img src="../../img/icons/10.png" alt=""></li>
				<li><img src="../../img/icons/11.png" alt=""></li>
				<li><img src="../../img/icons/12.png" alt=""></li>
				<li><img src="../../img/icons/13.png" alt=""></li>
				<li><img src="../../img/icons/14.png" alt=""></li>
			</ul>
		</div>
		
	</body>
</html>
